<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>总结生命周期</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
       <!-- 
        常用生命周期钩子:
            1. mounted: 发送ajax请求, 启动定时器, 绑定自定义事件,订阅消息等[初始化操作]
            2. beforeDestroy: 清除定时器,解绑自定义事件,取消订阅消息等[收尾工作]
        关于销毁Vue实例:
            1. 销毁后借助Vue开发者工具看不到任何信息
            2. 销毁后自定义事件会失效,但原生DOM事件依然有效.
            3. 一般不会在beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了.
        -->
        <div id="root">
            <h2 :style="{opacity}">欢迎哈哈哈哈</h2>
            <button @click="stop">点我停止变换</button>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false    // 阻止Vue在启动时生成生产提示

            // 创建Vue实例，开端
            const vm = new Vue({
                el: '#root', 
                data: {
                    opacity: 1
                },
                methods: {
                    stop: function(){
                        this.$destroy()
                    }
                },
                mounted() {
                    console.log('mounted', this)
                    this.timer = setInterval(() => {
                        vm.opacity -= 0.01
                        if (vm.opacity <= 0) vm.opacity = 1
                    })
                },
                beforeDestroy() {
                    clearInterval(this.timer)
                },
            })
        </script>
    </body>
</html>
